{include file="common/header" /}

<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-2xl font-bold text-gray-800 mb-6">
            <i class="fa fa-money text-primary mr-2"></i> 我的工资统计
        </h3>
        
        <!-- 日期筛选 -->
        <div class="mb-6">
            <form class="flex flex-col md:flex-row gap-4 items-end" method="get">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">开始日期：</label>
                    <input type="date" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" id="start_date" name="start_date" value="{$start_date}">
                </div>
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">结束日期：</label>
                    <input type="date" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" id="end_date" name="end_date" value="{$end_date}">
                </div>
                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-md hover:bg-blue-700 transition-colors">查询</button>
            </form>
        </div>

        <!-- 个人统计汇总 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 text-center">
                <div class="text-3xl font-bold text-blue-600">{$total_quantity|default=0}</div>
                <div class="text-sm text-blue-700 mt-2">总报工数量</div>
            </div>
            <div class="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
                <div class="text-3xl font-bold text-green-600">¥{$total_wage|default='0.00'}</div>
                <div class="text-sm text-green-700 mt-2">总工资金额</div>
            </div>
            <div class="bg-purple-50 border border-purple-200 rounded-lg p-6 text-center">
                <div class="text-3xl font-bold text-purple-600">¥{$confirmed_wage|default='0.00'}</div>
                <div class="text-sm text-purple-700 mt-2">已确认金额</div>
            </div>
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                <div class="text-3xl font-bold text-yellow-600">¥{$pending_wage|default='0.00'}</div>
                <div class="text-sm text-yellow-700 mt-2">待确认金额</div>
            </div>
        </div>

        <!-- 个人工资图表 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <div class="bg-white border border-gray-200 rounded-lg p-4">
                <h4 class="text-lg font-semibold text-gray-800 mb-4">我的工资趋势</h4>
                <div id="wage-chart" style="height: 300px;"></div>
            </div>
            <div class="bg-white border border-gray-200 rounded-lg p-4">
                <h4 class="text-lg font-semibold text-gray-800 mb-4">我的报工趋势</h4>
                <div id="daily-wage-chart" style="height: 300px;"></div>
            </div>
        </div>

        <!-- 个人工资明细表格 -->
        <div class="bg-white border border-gray-200 rounded-lg p-4">
            <h4 class="text-lg font-semibold text-gray-800 mb-4">我的工资明细</h4>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产品名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工序名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报工数量</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工价</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工资金额</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {volist name="reports" id="report"}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{$report.createtime|date='Y-m-d',###}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{$report.allocation.order.order_no|default='-'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{$report.allocation.model.product.name|default='-'} - {$report.allocation.model.name|default='-'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{$report.allocation.process.name|default='-'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{$report.quantity}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{$report.allocation.price|default=0.00}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{$report.wage}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {if $report.status == 1}
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">已确认</span>
                                {else}
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">待确认</span>
                                {/if}
                            </td>
                        </tr>
                        {/volist}
                    </tbody>
                </table>
            </div>
            
            {if condition="empty($reports)"}
            <div class="text-center py-12">
                <i class="fa fa-inbox fa-3x text-gray-300 mb-4"></i>
                <p class="text-gray-500">暂无工资记录</p>
            </div>
            {/if}
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 初始化图表
$(function() {
    // 添加时间戳避免缓存
    var timestamp = new Date().getTime();
    
    // 加载个人工资图表
    $.get('{:url("worker/wageChart")}?v=' + timestamp, function(data) {
        if (data.code === 1) {
            var chartDom = document.getElementById('wage-chart');
            if (chartDom) {
                var myChart = echarts.init(chartDom);
                var option = {
                    title: { text: '我的工资趋势', left: 'center', textStyle: { fontSize: 14 } },
                    tooltip: { trigger: 'axis' },
                    xAxis: { type: 'category', data: data.data.dates || [] },
                    yAxis: { type: 'value', name: '工资 (元)' },
                    series: [{
                        name: '日工资',
                        type: 'bar',
                        data: data.data.wages || [],
                        itemStyle: { color: '#28a745' }
                    }]
                };
                myChart.setOption(option);
            }
        }
    });
    
    // 加载个人报工图表
    $.get('{:url("worker/dailyReport")}?v=' + timestamp, function(data) {
        if (data.code === 1) {
            var chartDom = document.getElementById('daily-wage-chart');
            if (chartDom) {
                var myChart = echarts.init(chartDom);
                var option = {
                    title: { text: '我的报工趋势', left: 'center', textStyle: { fontSize: 14 } },
                    tooltip: { trigger: 'axis' },
                    xAxis: { type: 'category', data: data.data.dates || [] },
                    yAxis: { type: 'value', name: '数量' },
                    series: [{
                        name: '报工数量',
                        type: 'line',
                        data: data.data.quantities || [],
                        smooth: true,
                        itemStyle: { color: '#667eea' }
                    }]
                };
                myChart.setOption(option);
            }
        }
    });
});
</script>

{include file="common/footer" /} 